<template>
  <div class="detail-wraper key-word-detail">
    <div class="top">
    	<el-row class='margin'>
    	  <el-col :span="8">
    	  	品牌名称：<span style="margin-left:20px;">{{detailData.brandName}}
    	  </span></el-col>
    	  <el-col :span="8">
    	  	sku关键词：<span style="margin-left:20px;">{{detailData.skuWord}}
    	  </span></el-col>
    	</el-row>

    	<el-row class='margin'>
    	  <el-col :span="8">
    	  	白名单低价区间：<span style="margin-left:20px;">{{detailData.whiteLowText}}
    	  </span></el-col>
    	  <el-col :span="8">
    	  	非白名单低价区间：<span style="margin-left:20px;">{{detailData.lowText}}
    	  </span></el-col>
    	</el-row>

    	<el-row class='margin'>
    	  <el-col :span="8">
    	  	假货价格区间：<span style="margin-left:20px;">{{detailData.fakeText}}
    	  </span></el-col>
    	</el-row>

    	<el-row class='margin'>
    	  <el-col :span="8">
    	  	平台：{{detailData.platTypeText}}
    	  </el-col></el-col>
    	  <el-col :span="8">
    	  	搜索方式：<span style="margin-left:20px;">{{detailData.searchTypeText}}
    	  </span></el-col>
    	</el-row>

    	<el-row class='margin'>
    	  <el-col :span="24" style='overflow: hidden;'>
    	  	<span style="float: left;">备注：</span><span style="margin-left:50px;word-break:break-all;display: block;">{{detailData.remark}}
    	  </span></el-col>
    	</el-row>
    </div>
    <div class="b">
      <el-row class="customer_row margin-table">
          <el-table
                :data="detailLog"
                border
                style="width: 100%">
                <el-table-column
                  prop="memberId"
                  align='center'
                  label="编号"
                  min-width="100">
                </el-table-column>
                <el-table-column
                  prop="platTypeText"
                  align='center'
                  label="平台">
                </el-table-column>
                <el-table-column
                  prop="whiteLowText"
                  align='center'
                  label="白名单低价区间">
                </el-table-column>
                <el-table-column
                  prop="lowText"
                  align='center'
                  label="非白名单低价区间">
                </el-table-column>
                <el-table-column
                  prop="fakeText"
                  align='center'
                  label="假货价格区间">
                </el-table-column>
                <el-table-column
                  prop="searchTypeText"
                  align='center'
                  label="搜索方式">
                </el-table-column>
                <el-table-column
                  prop="operatetype"
                  align='center'
                  label="操作类型">
                </el-table-column>
                <el-table-column
                  prop="memberName"
                  align='center'
                  label="操作者">
                </el-table-column>
                <el-table-column
                  prop="operateTime"
                  align='center'
                  label="操作时间">
                </el-table-column>
              </el-table>
      </el-row>

      <el-row class="paging" style='margin-top: 40px;'>
          <el-pagination
                  @current-change="handleCurrentChange"
                  @size-change="handleSizeChange"
                  :current-page="currentPage"
                  :page-sizes="pagingData.pageSizes"
                  :page-size="pageSize"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="totalCount">
          </el-pagination> 
      </el-row>
    </div>
  </div>
</template>

<script>
  import Vue from 'vue'
  import {
      Row, Col, Form, FormItem, Input, Select, Option, Radio, DatePicker,Tabs,TabPane,Tree,Pagination,Cascader, ButtonGroup, Button, Table, TableColumn, Checkbox, Message, MessageBox, Dialog, Autocomplete
  } from 'element-ui'
  import {mapGetters, mapActions, mapMutations} from 'vuex';

  Vue.use(Row);
  Vue.use(Col);
  Vue.use(Form);
  Vue.use(FormItem);
  Vue.use(Input);
  Vue.use(Select);
  Vue.use(Option);
  Vue.use(Radio);
  Vue.use(DatePicker);
  Vue.use(Cascader);
  Vue.use(ButtonGroup);
  Vue.use(Button);
  Vue.use(Table);
  Vue.use(Tree);
  Vue.use(Pagination);
  Vue.use(TableColumn);
  Vue.use(Checkbox);
  Vue.use(Autocomplete);
  Vue.use(Dialog);

  export default {
    components: {
        
    },
    head(){
        return {
            title: "低价关键词详情",
            meta: [
                { hid: 'keywordadd', name: 'keywordadd', content: 'keywordadd' }
            ]
        }
    },
    data () {
      return {
          tabName: '低价关键词详情',
          detailData: '',
          detailLog: [],
          pagingData: {
            pageNum: 1,
            pageSizes: [10, 20, 50],
            total: 0,
          },
      }
    },
    methods: {
      handleCurrentChange(val) {
        this.$store.commit('KEYWORD_DETAIL_CURRENTPAGE',{currentPageDetail:val})
        this.getLog()
      },
      handleSizeChange(val) {
        console.log(val)
        this.$store.commit('KEYWORD_DETAIL_PAGESIZE',{pageSizeDetail:val})
        this.getLog()
      },
      getDetail() {
        this.$store.dispatch('getKeywordDetail', {
          keywordId:this.$route.query.id,
        }).then(res=> {
          if (res) {
            this.detailData = res.data.data
          }
        })
      },
      getLog() {
        console.log(this)
        this.$store.dispatch('getKeywordLog', {
          keywordId:this.$route.query.id,
          pageNum: this.currentPage,
          pageSize: this.pageSize,
        }).then(res=> {
          if (res) {
            this.detailLog = res.data.data.list
            for(let i in this.detailLog) {
              this.detailLog[i].memberId = this.detailLog.length - i
            }
            this.$store.commit('KEYWORD_DETAIL_TOTALCOUNT',{totalCountDetail:res.data.data.total})
          }          
        })
      },
    },
    computed: {
        ...mapGetters({
            'pageTabsList': 'getPageTabsList',
            'currentPage': 'currentPageKeywordDetail',
            'totalCount': 'totalCountKeywordDetail',
            'pageSize': 'pageSizeKeywordDetail',
        })
    },
    created () {
        //pageTab
        if(process.BROWSER_BUILD) {
            if(this.pageTabsList[this.pageTabsList.length-1].name == 'CRM') {
                let arr = this.pageTabsList;
                arr[arr.length-1].name = this.$route.query.title;
                this.$store.commit('PAGETABSLIST',{data:arr})
            }
        }
        this.getDetail()
        this.getLog()
    },
    watch: {
      $route () {
        this.getDetail()
        this.getLog()
      }
    }
  }
</script>

<style lang="scss">
  .detail-wraper{
    padding-top: 20px;
  }
  .key-word-detail {
  	.top {
  		color: #666;
  		border-top: 1px solid #eee;
  		border-bottom: 1px solid #eee;
			.margin {
				margin: 30px 0;
			}
  	}
  }
</style>